<template>
    <div class="page-body">
        <tab active-color="#333" default-color="#AAA" :line-width="0" v-model="tabIndex">
            <tab-item v-for="(item, index) in tabList" @on-item-click="scrollTo" :selected="tabIndex === index" :key="index">{{item.label}}</tab-item>
        </tab>
        <transition>
            <div class="content">
                <div class="panel">
                    <div class="banner-recharge">
                        <div>
                            <h2>话费充值代金券</h2>
                            <p>中国石化加油卡代金券</p>
                        </div>
                        <div>
                            <b>35</b>
                            优点
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="banner-voucher">
                        <div class="text-center">
                            <b>35</b>
                            优点
                            <del>¥200.00</del>
                        </div>
                        <p>
                            中国石化加油卡200元代金券
                        </p>
                    </div>
                </div>
                <div class="panel tab-panel">
                    <h3>商品详情</h3>
                    <div class="banner-recharge">
                        <div>
                            <h2>话费充值代金券</h2>
                            <p>中国石化加油卡代金券</p>
                        </div>
                        <div>
                            <b>35</b>
                            优点
                        </div>
                    </div>
                    <div class="banner-items">
                        <ul>
                            <li>商品名称</li>
                            <li>中国石化加油卡200元代金券</li>
                            <li>商品编号</li>
                            <li>3636874937</li>
                            <li>商品面额</li>
                            <li>35优点</li>
                        </ul>
                    </div>
                    <ul class="banner-recharge-xs">
                        <li>
                            <div class="banner-recharge">
                                <div>
                                    <h2>话费充值代金券</h2>
                                    <p>中国石化加油卡代金券</p>
                                </div>
                                <div>
                                    <b>35</b>
                                    优点
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="banner-recharge">
                                <div>
                                    <h2>话费充值代金券</h2>
                                    <p>中国石化加油卡代金券</p>
                                </div>
                                <div>
                                    <b>35</b>
                                    优点
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="panel tab-panel">
                    <h3>使用流程</h3>
                    <div class="intro">
                        <p>驾优手机用户。</p>
                        <p></p>
                        <p>1、充值查询：</p>
                        <p>1）充值前，建议用户查询话费余额，如停机，请查询欠费金额以便您选择足以抵扣的话费面值。</p>
                        <p>2）充值后，可拨打运营商客服10086进行查询或凭借服务密码登陆网上营业厅查询缴费记录，停机充值用户，建议重新开机进行查询。</p>
                        <p>3）或者拨打客服400-611-5718</p>
                    </div>
                </div>
                <div class="panel tab-panel">
                    <h3>使用规则</h3>
                    <div class="intro">
                        <p>2、到账时间：</p>
                        <p>系统会在1-10分钟内自动完成充值，运营商系统异常情况下，会出现延迟到帐，具体到账时间以运营商系统缴费时间为准。</p>
                        <p>3、充值号码：</p>
                        <p>请您充值前务必仔细核对充值的手机号码，支付完成后，系统自动提交充值，将无法拦截，一旦充值成功，将无法进行退款。</p>
                        <p>4、充值发票：</p>
                        <p>充值前请咨询当地运营商是否可打印发票。</p>
                        <p>5、分次到账：</p>
                        <p>所购买面值如遇产品库存不足，系统将自动凑单，分多个面值拼凑为您进行充值，请您谅解。</p>
                    </div>
                </div>
                <div class="panel tab-panel">
                    <h3>重要声明</h3>
                    <div class="intro">
                        <p>遇系统问题，充值不成功，我们会为用户办理退款，退款会在3-15个工作日（遇节假日后延）原路退回用户支付的银行账户里，请及时查收，有问题尽快与客服联系。</p>
                        <p>温馨提示：</p>
                        <p>月末、月初充值高峰，订单量较大，系统繁忙，到账时间会有一定的延迟，建议您避开充值高峰进行充值，请您谅解！</p>
                    </div>
                </div>
            </div>
        </transition>
        <div class="bottom">
            <a @click="showDialog1 = true">立即兑换</a>
        </div>
        <x-dialog v-model="showDialog1" hide-on-blur dialog-transition="false">
            <div><img src="/static/img/dt_icon_01.png" alt=""></div>
            <div>
                <p>您已经兑换过该商品！</p>
                <p>请勿重复兑换，感谢对我们的关注！</p>
            </div>
            <a class="button" @click="showDialog1 = false; showDialog2 = true">去看看其他商品</a>
        </x-dialog>
        <x-dialog v-model="showDialog2" hide-on-blur dialog-transition="false">
            <div><img src="/static/img/dt_icon_02.png" alt=""></div>
            <div>
                <p>
                    确认使用
                    <b>20</b>
                    优点进行兑换？
                </p>
                <p>兑换后请按照后续提示使用！</p>
            </div>
            <a class="button" @click="showDialog2 = false">确认兑换</a>
        </x-dialog>
    </div>
</template>

<script>
import { Tab, TabItem, XButton, XDialog, TransferDomDirective as TransferDom } from 'vux';

const tabList = [{ label: '商品详情' }, { label: '使用流程' }, { label: '使用规则' }, { label: '重要申明' }];

export default {
    components: {
        Tab,
        TabItem,
        XButton,
        XDialog
    },
    directives: {
        TransferDom
    },
    data() {
        return {
            tabIndex: 0,
            tabList: tabList,
            showDialog1: false,
            showDialog2: false
        };
    },
    methods: {
        onScroll() {
            const content = document.querySelector('.content');
            const panels = document.querySelectorAll('.tab-panel');
            panels.forEach((panel, index) => {
                if (content.scrollTop + content.offsetTop > panel.offsetTop) {
                    this.tabIndex = index;
                }
                if (content.scrollHeight - content.scrollTop === content.clientHeight) {
                    this.tabIndex = index;
                }
            });
        },
        scrollTo(index) {
            const content = document.querySelector('.content');
            const panels = document.querySelectorAll('.tab-panel');
            let clientHeight = content.clientHeight,
                scrollHeight = content.scrollHeight,
                scrollTop = content.scrollTop,
                offsetTop = Math.min(panels[index].offsetTop, scrollHeight - clientHeight),
                spacing = Math.abs(scrollTop - offsetTop),
                inBefore = offsetTop > scrollTop,
                step = 0,
                stepLength = 0,
                oldTimestamp = performance.now(),
                scroll = newTimestamp => {
                    step += Math.PI / (spacing / (newTimestamp - oldTimestamp));

                    if (step >= Math.PI) return content.scrollTo(0, offsetTop);
                    if (content.scrollTop === offsetTop) return;

                    stepLength = spacing - Math.round(spacing * Math.cos(step));
                    stepLength = scrollTop + stepLength * (inBefore ? 1 : -1);

                    content.scrollTo(0, inBefore ? Math.min(offsetTop, stepLength) : Math.max(offsetTop, stepLength));

                    oldTimestamp = newTimestamp;
                    window.requestAnimationFrame(scroll);
                };

            window.requestAnimationFrame(scroll);
        }
    },
    mounted() {
        this.$nextTick(() => document.querySelector('.content').addEventListener('scroll', this.onScroll));
    }
};
</script>

<style lang="less" scoped>
.page-body {
    display: flex;
    flex-direction: column;
}
.vux-tab-wrap {
    z-index: 10;
    box-shadow: 0 0 3px #ccc;
}
.content {
    position: relative;
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
}
.bottom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 1rem;
    a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #424242;
        color: #e3c48d;
        font-size: 0.32rem;
        font-weight: 700;
    }
}
.panel {
    &:not(:last-child) {
        margin-bottom: 0.25rem;
    }
    & > h3 {
        margin-bottom: 0.25rem;
    }
    padding: 0.4rem 0.2rem;
    background-color: #fff;
}
.banner-recharge {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    height: 2.48rem;
    padding: 0.35rem;
    border-radius: 0.25rem;
    background: url(/static/img/mbg1.jpg) no-repeat;
    background-size: 100% 100%;
    color: #e4c48e;
    div:last-child {
        text-align: right;
    }
    p {
        margin-top: 0.05rem;
    }
    b {
        font-size: 0.8rem;
        line-height: 1;
    }
}
.banner-voucher {
    font-size: 0.32rem;
    text-align: center;
    color: #666;
    div {
        font-size: 0.28rem;
        position: relative;
        text-align: center;
    }
    del {
        position: absolute;
        top: 0.4rem;
        margin-left: 0.3rem;
        margin-right: -1.85rem;
        color: #999;
    }
    p {
        margin-top: 0.2rem;
    }
    b {
        font-size: 0.8rem;
        font-weight: 300;
        line-height: 1;
        color: #444;
    }
}
.banner-items {
    padding: 0.2rem 0.1rem;
    font-size: 0.28rem;
    ul {
        display: flex;
        flex-flow: wrap;
        width: 100%;
        padding-bottom: 0.2rem;
        li {
            flex: 1 1 30%;
            list-style: none;
            margin-top: 0.2rem;
            &:nth-child(even) {
                flex: 1 1 70%;
            }
        }
    }
}
.banner-recharge-xs {
    display: flex;
    justify-content: space-between;
    li {
        flex: 1;
        max-width: 48.8%;
        list-style: none;
        .banner-recharge {
            height: 1.171rem;
            padding: 0.2rem;
            font-size: 0.14rem;
            b {
                font-size: 0.4rem;
            }
        }
    }
}
.intro {
    font-size: 0.28rem;
    color: #666;
    p {
        margin-top: 0.15rem;
    }
}
.vux-x-dialog /deep/ .weui-dialog {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 4.5rem;
    height: 5.2rem;
    padding: 0.6rem 0.4rem;
    border-radius: 0.15rem;
    font-size: 0.28rem;
    img {
        height: 2rem;
    }
    p:not(:first-child) {
        margin-top: 0.2rem;
    }
    b {
        color: #e4c48e;
        font-size: 0.42rem;
        font-weight: 400;
    }
    .button {
        display: block;
        height: 0.9rem;
        line-height: 0.9rem;
        margin-left: 0.3rem;
        margin-right: 0.3rem;
        background: linear-gradient(top, #0b0b0b, #333131);
        font-size: 0.28rem;
        color: #fff;
    }
}
.text-center {
    text-align: center;
}
</style>
